<!doctype html>
<html>
<head>
<link href="../images/DSC00222.jpg" rel="icon" type="image/x-icon">
<meta charset="utf-8">
<title>Selamad Datang Di website Choirul Anam</title>
<link rel="stylesheet" href="style.css" type="text/css"></link>
<link rel="stylesheet" href="gallery-style.css"/>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="scrollTo.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('html, body').css('overflow', 'hidden');
function updateSize() {
var winWidth  = $(window).width(),
winHeight = $(window).height(),
wrapSum   = $('.box').siblings().length;
$('#wrap').css({
width:winWidth*(wrapSum/2),
height:winHeight*(wrapSum/3)
});
$('.box').css({
width:winWidth,
height:winHeight
});  
} updateSize();
$(window).resize(function() {				
//Update Size by Window Resize
updateSize();
});
// Use scrollTo JQuery plugin to create smooth scrolling effect
$('ul#nav a,#page a').click(function() {
$('a.active').removeClass('active');
$(this).addClass('active');
$('html, body').scrollTo($(this).attr('href'), 1000);	
// Prevent ancor for following their href value
return false;
});
});
</script>
</head>
<body>
<div id="wrap">

<!---------------------------------------------
-------------------Home------------------------
---------------------------------------------->
<div class="box" id="home">
<h1>Selamat Datang di Website Choirul Anam</h1>
<p>Ini adalah situs Pribadi Choirul Anam</p>
<div id="page">
<a href="#foto" title="Gallery Foto Choirul Anam"><img src="../images/img1.jpg" class="page-isi"></a>
<a href="#design" title="Gallery Desain Choirul Anam"><img src="../images/img2.png" class="page-isi"></a>
<a href="#contact" title="Kontak Choirul Anam"><img src="../images/img3.png" class="page-isi"></a>
<a href="#about" title="Tentang Choirul Anam"><img src="../images/img4.png" class="page-isi"></a>
</div>
</div>


<!---------------------------------------------
-----------------contact-----------------------
---------------------------------------------->
<div class="box" id="contact">
<h1>Kontak</h1>
<img src="../images/img3.png" style="background:#333;padding:10px;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:5px;-moz-border-radius-topright:5px;-moz-border-radius-bottomright:5px;border-top-right-radius:5px;border-bottom-right-radius:5px;">
<table width="380" border="0">
  <tr>
    <th scope="row">Phone</th>
    <td>+62 0896-8035-1325</td>
  </tr>
  <tr>
    <th scope="row" >E-mail</th>
    <td>iyunk21@gmail.com</td>
   </tr>
    <th scope="row">Facebook</th>
    <td><a href="http://www.facebook.com/cHoirulwillneverdie" target="_blank">Choirul IyunKDhuaSathu</a></td>
  </tr>
    <th scope="row">Twitter</th>
    <td><a href="https://twitter.com/ChoirulDvengean" target="_blank">@ChoirulDvengean</a></td>
  </tr>
</table>

</div>




<!---------------------------------------------
-------------------about------------------------
---------------------------------------------->
<div class="box" id="about">
<div id="about-page">
<h1 style="margin:0;">About</h1>
<img src="../images/DSC00222.jpg" style="width:200px;margin:5px;float:left;border:3px solid #fff;" >
<p style="font-size:16px; text-align:left;"><b>Hai</b> - perkenalkan Nama saya Choirul Anam, anak pertama dari empat bersaudara, saya berumur 14 Tahun, sekarang sekolah di SMPN 12 Malang</p>
<textarea>
Nama : Choirul Anam
TTL : Malang, 31 Agustus 1998
Alamat : Jl.kol.sugiono Gg7 No 25

Sekolah:
-SDNU Bahrul Ulum
-SMPN 12 Malang

Hobi :
-Maen Sepak Bola
-Coding
-Design
-Ngibulin Anak Orang :D
</textarea>
</div>
</div>


<!---------------------------------------------
-----------------design------------------------
---------------------------------------------->
<div class="box" id="design">
<div class="gallery">
		<div class="image-slide" id="slide1"><img src="images/design/1.png" alt="Slide 1"></div>
		<div class="image-slide" id="slide2"><img src="images/design/2.png" alt="Slide 2"></div>
		<div class="image-slide" id="slide3"><img src="images/design/3.png" alt="Slide 3"></div>

		<div class="image-slide" id="slide4"><img src="images/design/4.png" alt="Slide 2"></div>
		<div class="image-slide" id="slide5"><img src="images/design/5.png" alt="Slide 3"></div>
		<div class="image-slide" id="slide6"><img src="images/design/6.png" alt="Slide 1"></div>

		<div class="image-slide" id="slide7"><img src="images/design/7.png" alt="Slide 2"></div>
        <div class="image-slide" id="slide8"><img src="images/design/8.png" alt="Slide 1"></div>
		<div class="image-slide" id="slide9"><img src="images/design/9.png" alt="Slide 3"></div>
		
		<ul class="image-list">
	        <li><a href="#slide1" title="Design 1" id="link-slide1"><img src="images/design/1.png" alt="slide1"></a></li>
	        <li><a href="#slide2" title="Design 2" id="link-slide2"><img src="images/design/2.png" alt="slide2"></a></li>
	        <li><a href="#slide3" title="Design 2" id="link-slide3"><img src="images/design/3.png" alt="slide2"></a></li>
 
	        <li><a href="#slide4" title="Design 3" id="link-slide4"><img src="images/design/4.png" alt="slide1"></a></li>
	        <li><a href="#slide5" title="Design 4" id="link-slide5"><img src="images/design/5.png" alt="slide2"></a></li>
	        <li><a href="#slide6" title="Design 5" id="link-slide6"><img src="images/design/6.png"alt="slide2"></a></li>

	        <li><a href="#slide7" title="Design 7" id="link-slide7"><img src="images/design/7.png" alt="slide1"></a></li>
	        <li><a href="#slide8" title="Design 8" id="link-slide8"><img src="images/design/8.png" alt="slide2"></a></li>
	        <li><a href="#slide9" title="Design 9" id="link-slide9"><img src="images/design/9.png" alt="slide2"></a></li>
	    <ul>
	</div><!-- .gallery -->
</div>


<!---------------------------------------------
------------------credit-----------------------
---------------------------------------------->
<div class="box" id="credit">
<h1>Template by : <a href="http://www.dte.web.id" target="_blank">Taufik Nurrohman</a></h1>
<h1>Content by : <a href="/index.php?ID=2">Choirul Anam</a></h1>
</div>


<!---------------------------------------------
-------------------foto------------------------
---------------------------------------------->
<div class="box" id="foto">
<h1>Gallery Foto</h1>
<div class="gallery">
		<div class="image-slide" id="foto1"><img src="images/foto/1.png" alt="foto 1"></div>
		<div class="image-slide" id="foto2"><img src="images/foto/2.png" alt="foto 2"></div>
		<div class="image-slide" id="foto3"><img src="images/foto/3.png" alt="foto 3"></div>

		<div class="image-slide" id="foto4"><img src="images/foto/4.png" alt="foto 1"></div>
		<div class="image-slide" id="foto5"><img src="images/foto/5.png" alt="foto 2"></div>
		<div class="image-slide" id="foto6"><img src="images/foto/6.png" alt="foto 3"></div>

		<div class="image-slide" id="foto7"><img src="images/foto/7.png" alt="foto 1"></div>
		<div class="image-slide" id="foto8"><img src="images/foto/8.png" alt="foto 2"></div>
		<div class="image-slide" id="foto9"><img src="images/foto/9.png" alt="foto 3"></div>
		
		<ul class="image-list">
	        <li><a href="#foto1" title="Foto1" id="link-slide1"><img src="images/foto/1.png" alt="slide1"></a></li>
	        <li><a href="#foto2" title="Foto2" id="link-slide2"><img src="images/foto/2.png" alt="slide2"></a></li>
	        <li><a href="#foto3" title="Foto3" id="link-slide3"><img src="images/foto/3.png" alt="slide2"></a></li>
 
	        <li><a href="#foto4" title="Foto4" id="link-slide1"><img src="images/foto/4.png" alt="slide1"></a></li>
	        <li><a href="#foto5" title="Foto5" id="link-slide2"><img src="images/foto/5.png" alt="slide2"></a></li>
	        <li><a href="#foto6" title="Foto6" id="link-slide3"><img src="images/foto/6.png" alt="slide2"></a></li>

	        <li><a href="#foto7" title="Foto7" id="link-slide1"><img src="images/foto/7.png" alt="slide1"></a></li>
	        <li><a href="#foto8" title="Foto8" id="link-slide2"><img src="images/foto/8.png" alt="slide2"></a></li>
	        <li><a href="#foto9" title="Foto9" id="link-slide3"><img src="images/foto/9.png" alt="slide2"></a></li>
	    <ul>
	</div><!-- .gallery -->
</div>



</div>

<!---------------------------------------------
-------------------Navi------------------------
---------------------------------------------->
<ul id="nav">
<li><a class="active" href="#home">Home</a></li>
<li><a href="#foto">Galery Foto</a></li>
<li><a href="#design">Galery Desain</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#credit">Credit</a></li>
</ul>
</body>
</html>
